<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="150px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="数据场：">

                  <UserSearchable v-model="from.dataFactoryId" :type="'datafieldList'">
                    <template #dropdownTitle>
                      <span>数据场</span>
                    </template>
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.name }}</span>
                    </template>
                  </UserSearchable>

                  <!-- <el-select
                    v-model="from.dataFactoryId"
                    placeholder="请选择数据场"
                    clearable
                    class="selWidth"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> -->



                </el-form-item>
                <el-form-item label="交易员账号：">


                  <!-- <UserSearchable v-model="from.traderAccountId" :type="'getMasterAccountType'">
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.id }}</span>
                      <span>{{ item.nickName }}</span>
                      <span>{{ item.dataFactoryName }}</span>
                    </template>
                  </UserSearchable> -->


                  <!-- 换交易员账号接口 -->
                  <UserSearchable v-model="from.traderAccountId"  :type="'traderaccount'" :params="{ status: 1}">
                    <template #dropdownTitle>
                      <span>id</span>
                      <span>名称</span>
                      <span>权限</span>
                    </template>
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.id }}</span>
                      <span>{{ item.nickName }}</span>
                      <span>{{ item.dataFactoryName }}</span>
                    </template>
                  </UserSearchable>



                  <!-- <el-input
                    v-model="from.traderAccountId"
                    placeholder="请选择交易员账号"
                    @focus="selectUser"
                    clearable
                    class="selWidth"
                  /> -->
                </el-form-item>
                <el-form-item label="账户类型：">
                  <el-select v-model="from.tradeAccountType" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="资管账号"></el-option>
                    <el-option :value="2" label="模拟账号"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="排除已补仓：">
                  <el-select v-model="from.isCover" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="是"></el-option>
                    <el-option :value="2" label="否"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="方向：">
                  <el-select v-model="from.direction" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="买多"></el-option>
                    <el-option :value="2" label="卖空"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="第一次开仓时间：">
                  <el-date-picker v-model="firsttimeVal" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    @change="firstonchangeTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="第二次开仓时间：">
                  <el-date-picker v-model="secondtimeVal" value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" @change="secondonchangeTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="第三次开仓时间：">
                  <el-date-picker v-model="thirdtimeVal" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    @change="thirdonchangeTime">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="平仓时间：">
                  <el-date-picker v-model="timeVal" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    @change="onchangeTime">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" icon="el-icon-search" type="primary" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" @click="handleCoverList()">批量补仓</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        @selection-change="onSelectTab" highlight-current-row>
        <el-table-column type="selection" width="55" :selectable="checkSelectable">
        </el-table-column>
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="dataFactoryName" label="所属数据场" min-width="100" />
        <el-table-column prop="tradeName" label="交易员(SP开头资管)" min-width="150" />
        <el-table-column prop="contractMultiplier" label="乘数" min-width="100" />
        <el-table-column prop="fillType" label="补仓类型" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.fillType == 1">正常补仓</span>
            <span v-if="scope.row.fillType == 2">爆仓补仓</span>
            <span v-if="scope.row.fillType == 3">其他补仓</span>
          </template>
        </el-table-column>
        <el-table-column prop="turnover" label="应补金额" min-width="100" />
        <el-table-column prop="symbol" label="合约" min-width="100" />
        <el-table-column prop="entryVolume" label="手数" min-width="100" />
        <el-table-column prop="average" label="平均盈亏" min-width="100" />
        <el-table-column prop="entryPrice" label="开仓价" min-width="100" />
        <el-table-column prop="exitPrice" label="平仓价" min-width="100" />
        <el-table-column prop="entryTime" label="开仓时间" min-width="150" />
        <el-table-column prop="exitTime" label="平仓时间" min-width="150" />
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <!-- 提交弹框 -->
    <el-dialog :visible.sync="visible">
      <el-table border :data="selection" height="300" border style="width: 100%">
        <el-table-column prop="id" label="ID" min-width="100" />
        <el-table-column prop="dataFactoryName" label="所属数据场" min-width="100" />
        <el-table-column prop="tradeName" label="交易员(SP开头资管)" min-width="150" />
        <el-table-column prop="contractMultiplier" label="乘数" min-width="100" />
        <el-table-column prop="turnover" label="应补金额" min-width="150">
          <template slot-scope="scope">
            <el-input v-model="scope.row.turnover" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="symbol" label="合约" min-width="100" />
        <el-table-column prop="entryVolume" label="手数" min-width="100" />
        <el-table-column prop="average" label="平均盈亏" min-width="100" />
        <el-table-column prop="entryPrice" label="开仓价" min-width="100" />
        <el-table-column prop="exitPrice" label="平仓价" min-width="100" />
        <el-table-column prop="entryTime" label="开仓时间" min-width="150" />
        <el-table-column prop="exitTime" label="平仓时间" min-width="150" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectionClose()">取 消</el-button>
        <el-button type="primary" @click="selectionSubmit()">确 定</el-button>
      </span>
    </el-dialog>

    <!--交易员账号列表-->
    <el-dialog title="交易员账号列表" :visible.sync="userVisible" width="900px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-card class="box-card">
        <el-table border :data="userData.data" highlight-current-row @current-change="onSelectUser" width="800px" size="small">
          <el-table-column prop="id" label="ID" min-width="60" />
          <el-table-column prop="userId" label="用户UID" min-width="80" />
          <el-table-column prop="nickName" label="用户昵称" min-width="80" />
          <el-table-column prop="phone" label="用户电话" min-width="120" />
          <el-table-column prop="walletResponses" label="钱包" min-width="200">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.walletResponses" :key="index">
                <span>{{ item.currencyName }}</span>
                <span style="margin-left: 10px">{{ item.balance }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="exchangeFeeTemplateName" label="手续费模板" min-width="100" />
          <el-table-column prop="traderRiskTemplateName" label="风控模板" min-width="80" />
          <el-table-column prop="accountType" label="	账户类型" min-width="100">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.accountType == 1">资管账号</el-button>
              <el-button size="mini" v-if="scope.row.accountType == 2">模拟账号</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="tradeType" label="内外盘" min-width="80">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.tradeType == 1">国际</el-button>
              <el-button size="mini" v-if="scope.row.tradeType == 2">国内</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-if="scope.row.status == 1">正常</el-button>
              <el-button type="info" size="mini" v-if="scope.row.status == 2">停用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="userLimit" :current-page="userPage"
            layout="total, sizes, prev, pager, next, jumper" :total="userData.total" @size-change="handleUserSizeChange"
            @current-change="userPageChange" />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userclose()">取 消</el-button>
        <el-button type="primary" @click="usersubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UserSearchable from "@/components/UserSearchable";
import {
  // 数据场全列表
  datafieldGetOption,
} from "@/api/dataField";
import {
  // 交易员列表
  traderaccountList,
} from "@/api/user";
import {
  tradeaccountfillNormalList,
  tradeaccountfillSave,
} from "@/api/tradeaccountfill";
export default {
  name: "manage",
  data() {
    return {
      labelPosition: "right",
      options: [],
      firsttimeVal: "",
      secondtimeVal: "",
      thirdtimeVal: "",
      timeVal: "",
      from: {
        dataFactoryId: "",
        traderAccountId: "",
        tradeAccountType: "",
        isCover: "",
        direction: "",
        firstStartTime: "",
        firstEndTime: "",
        secondStartTime: "",
        secondEndTime: "",
        thirdStartTime: "",
        thirdEndTime: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0,
      },
      selection: [],
      visible: false,
      userVisible: false,
      userData: {
        data: [],
        total: 0,
      },
      currentRow: null,
      userPage: 1,
      userLimit: 10,
    };
  },
  components: {
    UserSearchable,
  },
  mounted() {
    datafieldGetOption({})
      .then((res) => {
        console.log("数据场全列表", res);
        this.options = res;
        this.getlist();
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    selectUser() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.userVisible = true;
      this.getUserList();
    },
    userclose() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.userVisible = false;
      this.from.traderAccountId = "";
    },
    usersubmit() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.userVisible = false;
    },
    onSelectUser(val) {
      this.currentRow = val;
      console.log("选择交易员账号", val);
      this.from.traderAccountId = val.id;
    },
    handleUserSizeChange(val) {
      this.userLimit = val;
      this.getUserList();
    },
    userPageChange(page) {
      this.userPage = page;
      this.getUserList();
    },
    firstonchangeTime(e) {
      this.firsttimeVal = e;
      if (this.firsttimeVal) {
        this.from.firstStartTime = this.firsttimeVal[0];
        this.from.firstEndTime = this.firsttimeVal[1];
      } else {
        this.from.firstStartTime = "";
        this.from.firstEndTime = "";
      }
      this.getlist();
    },
    secondonchangeTime(e) {
      this.secondtimeVal = e;
      if (this.secondtimeVal) {
        this.from.secondStartTime = this.secondtimeVal[0];
        this.from.secondEndTime = this.secondtimeVal[1];
      } else {
        this.from.secondStartTime = "";
        this.from.secondEndTime = "";
      }
      this.getlist();
    },
    thirdonchangeTime(e) {
      this.thirdtimeVal = e;
      if (this.thirdtimeVal) {
        this.from.thirdStartTime = this.thirdtimeVal[0];
        this.from.thirdEndTime = this.thirdtimeVal[1];
      } else {
        this.from.thirdStartTime = "";
        this.from.thirdEndTime = "";
      }
      this.getlist();
    },
    // 平仓时间
    onchangeTime(e) {
      this.timeVal = e;
      if (this.timeVal) {
        this.from.startTime = this.timeVal[0];
        this.from.endTime = this.timeVal[1];
      } else {
        this.from.startTime = "";
        this.from.endTime = "";
      }
      this.getlist();
    },
    getUserList() {
      let data = {
        page: this.userPage,
        limit: this.userLimit,
        status: 1,
      };
      traderaccountList(data)
        .then((res) => {
          console.log("交易员列表", res);
          this.userData.data = res.list;
          this.userData.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      this.from.page = 1;
      this.from.limit = 15;
      this.getlist();
    },
    reset() {
      this.from = {
        dataFactoryId: "",
        traderAccountId: "",
        tradeAccountType: "",
        isCover: "",
        direction: "",
        firstStartTime: "",
        firstEndTime: "",
        secondStartTime: "",
        secondEndTime: "",
        thirdStartTime: "",
        thirdEndTime: "",
        startTime: "",
        endTime: "",
        page: 1,
        limit: 15,
      };
      this.firsttimeVal = "";
      this.secondtimeVal = "";
      this.thirdtimeVal = "";
      this.timeVal = "";
      this.getlist();
    },
    // 选择
    onSelectTab(selection) {
      this.selection = [];
      selection.forEach((item) => {
        this.selection.push(item);
      });
    },
    checkSelectable(row) {
      return row.commited == 1;
    },
    handleCoverList() {
      if (this.selection.length == 0) {
        return this.$message.error("至少选择一项");
      }
      console.log(this.selection);
      this.visible = true;
    },
    selectionClose() {
      this.visible = false;
    },
    selectionSubmit() {
      console.log(this.selection);
      tradeaccountfillSave({ userTradeResps: this.selection })
        .then((res) => {
          console.log(res);
          this.visible = false;
          this.$message.success("提交成功");
          this.getlist();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getlist() {
      this.loading = true;
      tradeaccountfillNormalList(this.from)
        .then((res) => {
          console.log(res);
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    pageChange(page) {
      this.from.page = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.from.limit = val;
      this.getlist();
    },
  },
};
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}
</style>
